import { Control } from "@babylonjs/gui/2D/controls/control";
import { CreateUINode, UINode } from "babylon-lib/gui/base/ui-node";
import { ANCHOR } from "babylon-lib/gui/control/abstract-base";
import { CreateUIText, IUITextOptions, UIText } from "babylon-lib/gui/control/ui-text";
import { Stage, Vector3 } from "babylon-lib/index";
import { RenderOrder } from "babylon-lib/misc/render-order";
import * as Data from '../data/data';
import { Utils } from 'babylon-lib/tool/utils';
import { Landscape } from "../stages/default-stage-components/landscape/landscape";


/**
 * 北
 * 西
 * 焦点坐标
 * 距离
 */
class LeftTopPanel {

    private static _coordXText: UIText;
    private static _coordYText: UIText;
    private static _distanceText: UIText;
    private static _offsetXText: UIText;
    private static _offsetYText: UIText;

    public static node: UINode;

    public static initialize(stage: Stage): void {
        this.initializeNode(stage);
        this.bindData(stage);
    }

    private static bindData(stage: Stage): void {
        const scope = LeftTopPanel;
        Data.controlPanelDisplay.onChange((o, n) => {
            scope.node.display = n;
        });
        Data.coordinateX.onChange((o, n) => {
            this._coordXText.text = 'x=' + Utils.normalizeNumber(n + Landscape.refCoordinate.x, 1);
        });
        Data.coordinateZ.onChange((O, n) => {
            this._coordYText.text = 'Y=' + Utils.normalizeNumber(n + Landscape.refCoordinate.z, 1);
        });
        Data.distance.onChange((o, n) => {
            this._distanceText.text = '距离:' + Utils.normalizeNumber(n, 1) + 'm';
        });
        Data.offsetX.onChange((o, n) => {
            let t = n > 0 ? '西' : '东';
            this._offsetXText.text = t + ' ' + Utils.normalizeNumber(Math.abs(n), 1);
        });
        Data.offsetZ.onChange((o, n) => {
            let t = n > 0 ? '南' : '北';
            this._offsetYText.text = t + ' ' + Utils.normalizeNumber(Math.abs(n), 1);
        });
    }

    private static initializeNode(stage: Stage): void {
        const style: IUITextOptions = {
            anchor: ANCHOR.LEFT_TOP,
            fontColor: '#00ff40',
            fontSize: 22,
            width: 3,
            textHorizontalAlignment: Control.HORIZONTAL_ALIGNMENT_LEFT,
            renderingGroupId: RenderOrder.id(Data.orders.ui),
            inoperable: true,
        };
        const node = CreateUINode('left-top-panel-node', stage.mainScene, {
            lockToCamera: true,
            anchor: new Vector3(0, 0, 0),
            xrRatio: { x: 0.6, y: 1 },
            display: false,
        }, [
            CreateUIText('left-top-panel-coord-title', stage.mainScene, {
                ...style,
                text: '焦点坐标:',
                top: 0,
            }),
            this._coordXText = CreateUIText('left-top-panel-coord-x', stage.mainScene, {
                ...style,
                text: 'x=5523418',
                top: -0.05,
            }),
            this._coordYText = CreateUIText('left-top-panel-coord-x', stage.mainScene, {
                ...style,
                text: 'y=7261433',
                top: -0.1
            }),
            this._distanceText = CreateUIText('left-top-panel-distance', stage.mainScene, {
                ...style,
                text: '距离:0m',
                top: -0.15
            }),
            this._offsetXText = CreateUIText('left-top-panel-offset-x', stage.mainScene, {
                ...style,
                text: '西 0',
                top: -0.2
            }),
            this._offsetYText = CreateUIText('left-top-panel-offset-y', stage.mainScene, {
                ...style,
                text: '北 0',
                top: -0.25
            }),
        ]);
        this.node = node;
    }

}


export { LeftTopPanel };